<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 400;
summary_img = 300;
img_thumb_height = 0;
img_thumb_width = 0;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){ 
	if(strx.indexOf("<")!=-1)
	{
		var s = strx.split("<"); 
		for(var i=0;i<s.length;i++){ 
			if(s[i].indexOf(">")!=-1){ 
				s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
			} 
		} 
		strx =  s.join(""); 
	}
	chop = (chop < strx.length-1) ? chop : strx.length-2; 
	while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
	strx = strx.substring(0,chop-1); 
	return strx+'...'; 
}

function createSummaryAndThumb(pID){
	var div = document.getElementById(pID);
	var imgtag = "";
	var img = div.getElementsByTagName("img");
	var summ = summary_noimg;
	if(img.length>=1) {	
		imgtag = '';
		summ = summary_img;
	}
	
	var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
	div.innerHTML = summary;
}


//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/jquery-1.9.1.js' type='text/javascript'></script>
<script src='http://code.jquery.com/ui/1.10.1/jquery-ui.js' type='text/javascript'></script>
<style type='text/css'>
.post, #sidebar-wrap {display:none}
</style>
<script src='https://u-sup.googlecode.com/files/colorpicker.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
// ******************************************************************
// ******************************************************************
// Name 	: SupNav Menu Maker
// Version	: 1.0.0
// Author 	: TheUsupDev
// URL		: http://u-sup.blogspot.com / http://templatemaxs.com
// Contact	: usupnew@gmail.com
// Date	Create	: 01 Feb 2013
//
// Copyight TheUsupDev 2013, 
// This script premium, please don't use without permission by me.
// ******************************************************************
// ******************************************************************


var supCssTxt              = '',
    forValue               = '';

var supHtmlCode            = '';

var supCss = new Array();

// Config Main Menu
supCss['supNavWidthPx']      = "950px";
supCss['supNavWidthPr']      = "90%";
supCss['supNavHeight']       = "40px";
supCss['NmarginT']           = "0px";
supCss['NmarginB']           = "0px";
supCss['paddingT']           = "0px";
supCss['paddingR']           = "10px";
supCss['paddingB']           = "0px";
supCss['paddingL']           = "10px";
supCss['borderColor']        = "#adadad";
supCss['borderWidth']        = "2px";
supCss['borderStyle']        = "solid";
supCss['navRadiusT']         = "15px";
supCss['navRadiusR']         = "15px";
supCss['navRadiusB']         = "15px";
supCss['navRadiusL']         = "15px";

supCss['navBg1']    	     = "#cecece";
supCss['navBg2']             = "#898989";
supCss['navBg3']   	     = "#686868";
supCss['navBg4']             = "#a5a5a5";

supCss['navBgPos1']   	     = "0%";
supCss['navBgPos2']   	     = "50%";
supCss['navBgPos3']   	     = "50%";
supCss['navBgPos4']   	     = "100%";
supCss['Orientasi']          = "top";

// Menu Item & fOnt Setting
supCss['fontSize']           = "13px";
supCss['textColor']          = "#FFFFFF";
supCss['fontStack']          = "Arial";
supCss['fontStyle']          = "normal";
supCss['fontWeight']         = "bold";
supCss['textTransform']      = "none";
supCss['itemPaddingT']       = "12px";
supCss['itemPaddingR']       = "20px";
supCss['itemPaddingB']       = "12px";
supCss['itemPaddingL']       = "20px";
supCss['itemBorderR']        = "1px";
supCss['itemBorderColor']    = "#BBBBBB";
supCss['itemRadiusT']        = "15px";
supCss['itemRadiusR']        = "15px";
supCss['itemRadiusB']        = "15px";
supCss['itemRadiusL']        = "15px"; 

//Item background
supCss['itemBg1']    	     = "#ebebeb";
supCss['itemBg2']            = "#898989";
supCss['itemBg3']   	     = "#7a7a7a";
supCss['itemBg4']            = "#dbdbdb";
supCss['itemBgPos1']   	     = "0%";
supCss['itemBgPos2']   	     = "50%";
supCss['itemBgPos3']   	     = "50%";
supCss['itemBgPos4']   	     = "100%";
supCss['itemOrientasi']      = "top";
 
//item Hover background
supCss['itemHovBg1']         = "#99baf2";
supCss['itemHovBg2']         = "#0e5261";
supCss['itemHovBg3']   	     = "#10434f";
supCss['itemHovBg4']         = "#5b90a3";
supCss['itemHovBgPos1']      = "0%";
supCss['itemHovBgPos2']      = "50%";
supCss['itemHovBgPos3']      = "50%";
supCss['itemHovBgPos4']      = "100%";
supCss['itemHovOrientasi']   = "top";
supCss['hovtextColor']       = "#FFFFFF";

//item Current background
supCss['itemCurBg1']         = "#99baf2";
supCss['itemCurBg2']         = "#0e5261";
supCss['itemCurBg3']   	     = "#10434f";
supCss['itemCurBg4']         = "#5b90a3";
supCss['itemCurBgPos1']      = "0%";
supCss['itemCurBgPos2']      = "50%";
supCss['itemCurBgPos3']      = "50%";
supCss['itemCurBgPos4']      = "100%";
supCss['itemCurOrientasi']   = "top";
supCss['curtextColor']       = "#FFFFFF";

// Dropdown Menu Item & fOnt Setting
supCss['dropDownWidth']      = "185px";
supCss['topDropDown']        = "40px";
supCss['leftDropDown']       = "0px";
supCss['dropborderColor']    = "#adadad";
supCss['dropborderStyle']    = "solid";
supCss['dropborderWidth']    = "1px";
supCss['dropRadiusT']        = "10px";
supCss['dropRadiusR']        = "10px";
supCss['dropRadiusB']        = "10px";
supCss['dropRadiusL']        = "10px";
supCss['dropBg1']    	     = "#e6e6e6";
supCss['dropBg2']            = "#bdbdbd";
supCss['dropBg3']   	     = "#686868";
supCss['dropBg4']            = "#a5a5a5";
supCss['dropBgPos1']   	     = "1%";
supCss['dropBgPos2']   	     = "100%";
supCss['dropBgPos3']   	     = "32%";
supCss['dropBgPos4']   	     = "100%";
supCss['dropOrientasi']      = "top";

//Dropdown Item text & font
supCss['dropfontSize']       = "12px";
supCss['dropfontColor']      = "#222222";
supCss['dropfontStack']      = "Arial";
supCss['dropfontStyle']      = "normal";
supCss['dropfontWeight']     = "normal";
supCss['dropItemborderColor']    = "#BBBBBB";
supCss['dropItemborderStyle']    = "solid";
supCss['dropItemborderWidth']    = "1px";

//Dropdown Hover
supCss['dropHovfontColor']   = "#222222";
supCss['dropHovBg1']         = "#e6e6e6";
supCss['dropHovBg2']         = "#bdbdbd";
supCss['dropHovBg3']   	     = "#686868";
supCss['dropHovBg4']         = "#a5a5a5";
supCss['dropHovBgPos1']      = "1%";
supCss['dropHovBgPos2']      = "100%";
supCss['dropHovBgPos3']      = "32%";
supCss['dropHovBgPos4']      = "100%";
supCss['dropHovOrientasi']   = "top";

//Search Box Settings
supCss['searchwidth']        = "90px";
supCss['searchHovwidth']     = "200px";
supCss['searchMarginT']      = "5px";
supCss['searchBg1']    	     = "#cecece";
supCss['searchBg2']          = "#898989";
supCss['searchBg3']   	     = "#686868";
supCss['searchBg4']          = "#a5a5a5";
supCss['searchBgPos1']       = "0%";
supCss['searchBgPos2']       = "50%";
supCss['searchBgPos3']       = "50%";
supCss['searchBgPos4']       = "100%";
supCss['searchOrientasi']    = "top";
supCss['searcBorderColor']   = "#CCCCCC";
supCss['searchBorderStyle']  = "inset";
supCss['searchBorderRadius'] = "20px";
supCss['paddingDropDown']    = "0px"

function tulisCSS() {    
    supCssTxt              = " /* Start Sup-Nav Menu \n";
    supCssTxt             += " ================================================ */ \n";
    supCssTxt             += " #sup-nav { \n";
 	if (document.getElementById("usePixel").checked==true) {
    supCssTxt             += "     width: " + supCss['supNavWidthPx'] + ";\n";
	} else { 
    supCssTxt            += "      width: " + supCss['supNavWidthPr'] + ";\n";
	}    
    supCssTxt             += "     height: " + supCss['supNavHeight'] + ";\n";
    supCssTxt             += "     vertical-align: middle;\n";
    supCssTxt             += "     padding: " + supCss['paddingT'] + " " + supCss['paddingR'] + " " + supCss['paddingB'] + " " + supCss['paddingL'] + ";\n";
    supCssTxt             += "     margin: " + supCss['NmarginT'] + " auto " + supCss['NmarginB'] + ";\n";    
    supCssTxt             += "     border: " + supCss['borderWidth'] + " " + supCss['borderStyle'] + " " + supCss['borderColor'] + ";\n";
    supCssTxt             += "     border-radius: " + supCss['navRadiusT'] + " " + supCss['navRadiusR'] + " " + supCss['navRadiusB'] + " " + supCss['navRadiusL'] + ";\n";
    supCssTxt             += "     -moz-border-radius: " + supCss['navRadiusT'] + " " + supCss['navRadiusR'] + " " + supCss['navRadiusB'] + " " + supCss['navRadiusL'] + ";\n";
    supCssTxt             += "     -webkit-border-radius: " + supCss['navRadiusT'] + " " + supCss['navRadiusR'] + " " + supCss['navRadiusB'] + " " + supCss['navRadiusL'] + ";\n";
    supCssTxt             += "     -o-border-radius: " + supCss['navRadiusT'] + " " + supCss['navRadiusR'] + " " + supCss['navRadiusB'] + " " + supCss['navRadiusL'] + ";\n";
    supCssTxt             += "     background: " + supCss['navBg1'] + ";\n"; 
    supCssTxt             += "     background: -moz-linear-gradient(" + supCss['Orientasi'] + ",  " + supCss['navBg1'] + " " + supCss['navBgPos1'] + ", " + supCss['navBg2'] + " " + supCss['navBgPos2'] + ", " + supCss['navBg3'] + " " + supCss['navBgPos3'] + ", " + supCss['navBg4'] + " " + supCss['navBgPos4'] + ");\n"; 
    supCssTxt             += "     background: -webkit-gradient(linear, left " + supCss['Orientasi'] + ", left bottom, color-stop(" + supCss['navBgPos1'] + "," + supCss['navBg1'] + "), color-stop(" + supCss['navBgPos2'] + "," + supCss['navBg2'] + "), color-stop(" + supCss['navBgPos3'] + "," + supCss['navBg3'] + "), color-stop(" + supCss['navBgPos4'] + "," + supCss['navBg4'] + "));\n"; 
    supCssTxt             += "     background: -webkit-linear-gradient(" + supCss['Orientasi'] + ",  " + supCss['navBg1'] + " " + supCss['navBgPos1'] + "," + supCss['navBg2'] + " " + supCss['navBgPos2'] + "," + supCss['navBg3'] + " " + supCss['navBgPos3'] + "," + supCss['navBg4'] + " " + supCss['navBgPos4'] + ");\n"; 
    supCssTxt             += "     background: -o-linear-gradient(" + supCss['Orientasi'] + ",  " + supCss['navBg1'] + " " + supCss['navBgPos1'] + "," + supCss['navBg2'] + " " + supCss['navBgPos2'] + "," + supCss['navBg3'] + " " + supCss['navBgPos3'] + "," + supCss['navBg4'] + " " + supCss['navBgPos4'] + ");\n"; 
    supCssTxt             += "     background: -ms-linear-gradient(" + supCss['Orientasi'] + ",  " + supCss['navBg1'] + " " + supCss['navBgPos1'] + "," + supCss['navBg2'] + " " + supCss['navBgPos2'] + "," + supCss['navBg3'] + " " + supCss['navBgPos3'] + "," + supCss['navBg4'] + " " + supCss['navBgPos4'] + ");\n"; 
    supCssTxt             += "     background: linear-gradient(to " + supCss['Orientasi'] + ",  " + supCss['navBg1'] + " " + supCss['navBgPos1'] + "," + supCss['navBg2'] + " " + supCss['navBgPos2'] + "," + supCss['navBg3'] + " " + supCss['navBgPos3'] + "," + supCss['navBg4'] + " " + supCss['navBgPos4'] + ");\n"; 
    supCssTxt             += " }\n";
    
    supCssTxt             += " #sup-nav li { \n";
    supCssTxt             += "     margin: 0px 0px 0px 0px;\n";
    supCssTxt             += "     padding: 0px 0px 0px 0px!important;\n";
    supCssTxt             += "     float: left;\n";
    supCssTxt             += "     position: relative;\n";
    supCssTxt             += "     list-style: none;\n";
    supCssTxt             += "     border-right: " + supCss['itemBorderR'] + " solid " + supCss['itemBorderColor'] + ";\n";
    supCssTxt             += " }\n"; 

// Menu Item CSS
    supCssTxt             += " #sup-nav li a { \n";  
    supCssTxt             += "     font-size: " + supCss['fontSize'] + ";\n";
    supCssTxt             += "     color: " + supCss['textColor'] + ";\n";    
    supCssTxt             += "     font-family: " + supCss['fontStack'] + ";\n";
    supCssTxt             += "     font-style: " + supCss['fontStyle'] + ";\n";
    supCssTxt             += "     font-weight: " + supCss['fontWeight'] + ";\n";
    supCssTxt             += "     text-transform: " + supCss['textTransform'] + ";\n";
    supCssTxt             += "     text-decoration: none;\n";
    supCssTxt             += "     display: block;\n";
    supCssTxt             += "     padding: " + supCss['itemPaddingT'] + " " + supCss['itemPaddingR'] + " " + supCss['itemPaddingB'] + " " + supCss['itemPaddingL'] + ";\n";
    supCssTxt             += "     margin: 0 5px 0 5px;\n";
    supCssTxt             += "     border-radius: " + supCss['itemRadiusT'] + " " + supCss['itemRadiusR'] + " " + supCss['itemRadiusB'] + " " + supCss['itemRadiusL'] + ";\n";
    supCssTxt             += "     -moz-border-radius: " + supCss['itemRadiusT'] + " " + supCss['itemRadiusR'] + " " + supCss['itemRadiusB'] + " " + supCss['itemRadiusL'] + ";\n";
    supCssTxt             += "     -webkit-border-radius: " + supCss['itemRadiusT'] + " " + supCss['itemRadiusR'] + " " + supCss['itemRadiusB'] + " " + supCss['itemRadiusL'] + ";\n";
    supCssTxt             += "     -o-border-radius: " + supCss['itemRadiusT'] + " " + supCss['itemRadiusR'] + " " + supCss['itemRadiusB'] + " " + supCss['itemRadiusL'] + ";\n";
 	if (document.getElementById("itemBgTrue").checked==true) {
    supCssTxt             += "     background: none;\n";
	} else { 
    supCssTxt             += "     background: " + supCss['itemBg1'] + ";\n"; 
    supCssTxt             += "     background: -moz-linear-gradient(" + supCss['itemOrientasi'] + ",  " + supCss['itemBg1'] + " " + supCss['itemBgPos1'] + ", " + supCss['itemBg2'] + " " + supCss['itemBgPos2'] + ", " + supCss['itemBg3'] + " " + supCss['itemBgPos3'] + ", " + supCss['itemBg4'] + " " + supCss['itemBgPos4'] + ");\n"; 
    supCssTxt             += "     background: -webkit-gradient(linear, left " + supCss['itemOrientasi'] + ", left bottom, color-stop(" + supCss['itemBgPos1'] + "," + supCss['itemBg1'] + "), color-stop(" + supCss['itemBgPos2'] + "," + supCss['itemBg2'] + "), color-stop(" + supCss['itemBgPos3'] + "," + supCss['itemBg3'] + "), color-stop(" + supCss['itemBgPos4'] + "," + supCss['itemBg4'] + "));\n"; 
    supCssTxt             += "     background: -webkit-linear-gradient(" + supCss['itemOrientasi'] + ",  " + supCss['itemBg1'] + " " + supCss['itemBgPos1'] + "," + supCss['itemBg2'] + " " + supCss['itemBgPos2'] + "," + supCss['itemBg3'] + " " + supCss['itemBgPos3'] + "," + supCss['itemBg4'] + " " + supCss['itemBgPos4'] + ");\n"; 
    supCssTxt             += "     background: -o-linear-gradient(" + supCss['itemOrientasi'] + ",  " + supCss['itemBg1'] + " " + supCss['itemBgPos1'] + "," + supCss['itemBg2'] + " " + supCss['itemBgPos2'] + "," + supCss['itemBg3'] + " " + supCss['itemBgPos3'] + "," + supCss['itemBg4'] + " " + supCss['itemBgPos4'] + ");\n"; 
    supCssTxt             += "     background: -ms-linear-gradient(" + supCss['itemOrientasi'] + ",  " + supCss['itemBg1'] + " " + supCss['itemBgPos1'] + "," + supCss['itemBg2'] + " " + supCss['itemBgPos2'] + "," + supCss['itemBg3'] + " " + supCss['itemBgPos3'] + "," + supCss['itemBg4'] + " " + supCss['itemBgPos4'] + ");\n"; 
    supCssTxt             += "     background: linear-gradient(to " + supCss['itemOrientasi'] + ",  " + supCss['itemBg1'] + " " + supCss['itemBgPos1'] + "," + supCss['itemBg2'] + " " + supCss['itemBgPos2'] + "," + supCss['itemBg3'] + " " + supCss['itemBgPos3'] + "," + supCss['itemBg4'] + " " + supCss['itemBgPos4'] + ");\n"; 
	}    
    supCssTxt             += " }\n";

    supCssTxt             += " #sup-nav li:hover > a {\n";
    supCssTxt             += "     color: " + supCss['hovtextColor'] + ";\n";
 	if (document.getElementById("itemHovBgTrue").checked==true) {
    supCssTxt             += "     background: none;\n";
	} else { 
    supCssTxt             += "     background: " + supCss['itemHovBg1'] + ";\n"; 
    supCssTxt             += "     background: -moz-linear-gradient(" + supCss['itemHovOrientasi'] + ",  " + supCss['itemHovBg1'] + " " + supCss['itemHovBgPos1'] + ", " + supCss['itemHovBg2'] + " " + supCss['itemHovBgPos2'] + ", " + supCss['itemHovBg3'] + " " + supCss['itemHovBgPos3'] + ", " + supCss['itemHovBg4'] + " " + supCss['itemHovBgPos4'] + ");\n"; 
    supCssTxt             += "     background: -webkit-gradient(linear, left " + supCss['itemHovOrientasi'] + ", left bottom, color-stop(" + supCss['itemHovBgPos1'] + "," + supCss['itemHovBg1'] + "), color-stop(" + supCss['itemHovBgPos2'] + "," + supCss['itemHovBg2'] + "), color-stop(" + supCss['itemHovBgPos3'] + "," + supCss['itemHovBg3'] + "), color-stop(" + supCss['itemHovBgPos4'] + "," + supCss['itemHovBg4'] + "));\n"; 
    supCssTxt             += "     background: -webkit-linear-gradient(" + supCss['itemHovOrientasi'] + ",  " + supCss['itemHovBg1'] + " " + supCss['itemHovBgPos1'] + "," + supCss['itemHovBg2'] + " " + supCss['itemHovBgPos2'] + "," + supCss['itemHovBg3'] + " " + supCss['itemHovBgPos3'] + "," + supCss['itemHovBg4'] + " " + supCss['itemHovBgPos4'] + ");\n"; 
    supCssTxt             += "     background: -o-linear-gradient(" + supCss['itemHovOrientasi'] + ",  " + supCss['itemHovBg1'] + " " + supCss['itemHovBgPos1'] + "," + supCss['itemHovBg2'] + " " + supCss['itemHovBgPos2'] + "," + supCss['itemHovBg3'] + " " + supCss['itemHovBgPos3'] + "," + supCss['itemHovBg4'] + " " + supCss['itemHovBgPos4'] + ");\n"; 
    supCssTxt             += "     background: -ms-linear-gradient(" + supCss['itemHovOrientasi'] + ",  " + supCss['itemHovBg1'] + " " + supCss['itemHovBgPos1'] + "," + supCss['itemHovBg2'] + " " + supCss['itemHovBgPos2'] + "," + supCss['itemHovBg3'] + " " + supCss['itemHovBgPos3'] + "," + supCss['itemHovBg4'] + " " + supCss['itemHovBgPos4'] + ");\n"; 
    supCssTxt             += "     background: linear-gradient(to " + supCss['itemHovOrientasi'] + ",  " + supCss['itemHovBg1'] + " " + supCss['itemHovBgPos1'] + "," + supCss['itemHovBg2'] + " " + supCss['itemHovBgPos2'] + "," + supCss['itemHovBg3'] + " " + supCss['itemHovBgPos3'] + "," + supCss['itemHovBg4'] + " " + supCss['itemHovBgPos4'] + ");\n"; 
	} 
    supCssTxt             += "  }\n";

    supCssTxt             += " #sup-nav .current a  {\n";
    supCssTxt             += "     color: " + supCss['curtextColor'] + ";\n";
 	if (document.getElementById("itemCurBgTrue").checked==true) {
    supCssTxt             += "     background: none;\n";
	} else { 
    supCssTxt             += "     background: " + supCss['itemCurBg1'] + ";\n"; 
    supCssTxt             += "     background: -moz-linear-gradient(" + supCss['itemCurOrientasi'] + ",  " + supCss['itemCurBg1'] + " " + supCss['itemCurBgPos1'] + ", " + supCss['itemCurBg2'] + " " + supCss['itemCurBgPos2'] + ", " + supCss['itemCurBg3'] + " " + supCss['itemCurBgPos3'] + ", " + supCss['itemCurBg4'] + " " + supCss['itemCurBgPos4'] + ");\n"; 
    supCssTxt             += "     background: -webkit-gradient(linear, left " + supCss['itemCurOrientasi'] + ", left bottom, color-stop(" + supCss['itemCurBgPos1'] + "," + supCss['itemCurBg1'] + "), color-stop(" + supCss['itemCurBgPos2'] + "," + supCss['itemCurBg2'] + "), color-stop(" + supCss['itemCurBgPos3'] + "," + supCss['itemCurBg3'] + "), color-stop(" + supCss['itemCurBgPos4'] + "," + supCss['itemCurBg4'] + "));\n"; 
    supCssTxt             += "     background: -webkit-linear-gradient(" + supCss['itemCurOrientasi'] + ",  " + supCss['itemCurBg1'] + " " + supCss['itemCurBgPos1'] + "," + supCss['itemCurBg2'] + " " + supCss['itemCurBgPos2'] + "," + supCss['itemCurBg3'] + " " + supCss['itemCurBgPos3'] + "," + supCss['itemCurBg4'] + " " + supCss['itemCurBgPos4'] + ");\n"; 
    supCssTxt             += "     background: -o-linear-gradient(" + supCss['itemCurOrientasi'] + ",  " + supCss['itemCurBg1'] + " " + supCss['itemCurBgPos1'] + "," + supCss['itemCurBg2'] + " " + supCss['itemCurBgPos2'] + "," + supCss['itemCurBg3'] + " " + supCss['itemCurBgPos3'] + "," + supCss['itemCurBg4'] + " " + supCss['itemCurBgPos4'] + ");\n"; 
    supCssTxt             += "     background: -ms-linear-gradient(" + supCss['itemCurOrientasi'] + ",  " + supCss['itemCurBg1'] + " " + supCss['itemCurBgPos1'] + "," + supCss['itemCurBg2'] + " " + supCss['itemCurBgPos2'] + "," + supCss['itemCurBg3'] + " " + supCss['itemCurBgPos3'] + "," + supCss['itemCurBg4'] + " " + supCss['itemCurBgPos4'] + ");\n"; 
    supCssTxt             += "     background: linear-gradient(to " + supCss['itemCurOrientasi'] + ",  " + supCss['itemCurBg1'] + " " + supCss['itemCurBgPos1'] + "," + supCss['itemCurBg2'] + " " + supCss['itemCurBgPos2'] + "," + supCss['itemCurBg3'] + " " + supCss['itemCurBgPos3'] + "," + supCss['itemCurBg4'] + " " + supCss['itemCurBgPos4'] + ");\n"; 
	} 
    supCssTxt             += "  }\n";

    supCssTxt             += " #sup-nav li ul  {\n";
    supCssTxt             += "     width: " + supCss['dropDownWidth'] + ";\n";
    supCssTxt             += "     position: absolute;\n";
    supCssTxt             += "     top: " + supCss['topDropDown'] + ";\n";
    supCssTxt             += "     left: " + supCss['leftDropDown'] + ";\n";
    supCssTxt             += "     display: none;\n";
    supCssTxt             += "     margin: 0;\n";
    supCssTxt             += "     padding: " + supCss['paddingDropDown'] + ";\n";
    supCssTxt             += "     z-index:200;\n";
    supCssTxt             += "     border: " + supCss['dropborderWidth'] + "  " + supCss['dropborderStyle'] + "  " + supCss['dropborderColor'] + ";\n";
    supCssTxt             += "     border-radius: " + supCss['dropRadiusT'] + " " + supCss['dropRadiusR'] + " " + supCss['dropRadiusB'] + " " + supCss['dropRadiusL'] + ";\n";
    supCssTxt             += "     -moz-border-radius: " + supCss['dropRadiusT'] + " " + supCss['dropRadiusR'] + " " + supCss['dropRadiusB'] + " " + supCss['dropRadiusL'] + ";\n";
    supCssTxt             += "     -webkit-border-radius: " + supCss['dropRadiusT'] + " " + supCss['dropRadiusR'] + " " + supCss['dropRadiusB'] + " " + supCss['dropRadiusL'] + ";\n";
    supCssTxt             += "     -o-border-radius: " + supCss['dropRadiusT'] + " " + supCss['dropRadiusR'] + " " + supCss['dropRadiusB'] + " " + supCss['dropRadiusL'] + ";\n";
    supCssTxt             += "     -webkit-box-shadow: 2px 2px 3px #cccccc;\n";
    supCssTxt             += "     -moz-box-shadow: 2px 2px 3px #cccccc;\n";
    supCssTxt             += "     -o-box-shadow: 2px 2px 3px #cccccc;\n";
    supCssTxt             += "     box-shadow: 2px 2px 3px #cccccc;\n";
    supCssTxt             += "     background: " + supCss['dropBg1'] + ";\n"; 
    supCssTxt             += "     background: -moz-linear-gradient(" + supCss['dropOrientasi'] + ",  " + supCss['dropBg1'] + " " + supCss['dropBgPos1'] + ", " + supCss['dropBg2'] + " " + supCss['dropBgPos2'] + ", " + supCss['dropBg3'] + " " + supCss['dropBgPos3'] + ", " + supCss['dropBg4'] + " " + supCss['dropBgPos4'] + ");\n"; 
    supCssTxt             += "     background: -webkit-gradient(linear, left " + supCss['dropOrientasi'] + ", left bottom, color-stop(" + supCss['dropBgPos1'] + "," + supCss['dropBg1'] + "), color-stop(" + supCss['dropBgPos2'] + "," + supCss['dropBg2'] + "), color-stop(" + supCss['dropBgPos3'] + "," + supCss['dropBg3'] + "), color-stop(" + supCss['dropBgPos4'] + "," + supCss['dropBg4'] + "));\n"; 
    supCssTxt             += "     background: -webkit-linear-gradient(" + supCss['dropOrientasi'] + ",  " + supCss['dropBg1'] + " " + supCss['dropBgPos1'] + "," + supCss['dropBg2'] + " " + supCss['dropBgPos2'] + "," + supCss['dropBg3'] + " " + supCss['dropBgPos3'] + "," + supCss['dropBg4'] + " " + supCss['dropBgPos4'] + ");\n"; 
    supCssTxt             += "     background: -o-linear-gradient(" + supCss['dropOrientasi'] + ",  " + supCss['dropBg1'] + " " + supCss['dropBgPos1'] + "," + supCss['dropBg2'] + " " + supCss['dropBgPos2'] + "," + supCss['dropBg3'] + " " + supCss['dropBgPos3'] + "," + supCss['dropBg4'] + " " + supCss['dropBgPos4'] + ");\n"; 
    supCssTxt             += "     background: -ms-linear-gradient(" + supCss['dropOrientasi'] + ",  " + supCss['dropBg1'] + " " + supCss['dropBgPos1'] + "," + supCss['dropBg2'] + " " + supCss['dropBgPos2'] + "," + supCss['dropBg3'] + " " + supCss['dropBgPos3'] + "," + supCss['dropBg4'] + " " + supCss['dropBgPos4'] + ");\n"; 
    supCssTxt             += "     background: linear-gradient(to " + supCss['dropOrientasi'] + ",  " + supCss['dropBg1'] + " " + supCss['dropBgPos1'] + "," + supCss['dropBg2'] + " " + supCss['dropBgPos2'] + "," + supCss['dropBg3'] + " " + supCss['dropBgPos3'] + "," + supCss['dropBg4'] + " " + supCss['dropBgPos4'] + ");\n"; 
    supCssTxt             += " }\n";

    supCssTxt             += " #sup-nav li:hover > ul  {\n";
    supCssTxt             += "     display: block;\n";
    supCssTxt             += "  }\n";

    supCssTxt             += " #sup-nav li ul li {\n";
    supCssTxt             += "     float: none;\n";
    supCssTxt             += "     margin: 0;\n";
    supCssTxt             += "     padding: 0;\n";
    supCssTxt             += "     border:none;\n";
    supCssTxt             += " }\n";

    supCssTxt             += " #sup-nav li ul li a {\n";
    supCssTxt             += "     padding:8px 0px 8px 15px;\n";
    supCssTxt             += "     margin:0;\n";
    supCssTxt             += "     background: none;\n" 
    supCssTxt             += "     text-align:left;\n";
    supCssTxt             += "     color: " + supCss['dropfontColor'] + " !important;\n";
    supCssTxt             += "     font-size: " + supCss['dropfontSize'] + ";\n";
    supCssTxt             += "     font-style: " + supCss['dropfontStyle'] + ";\n";
    supCssTxt             += "     font-family: " + supCss['dropfontStack'] + ";\n";
    supCssTxt             += "     font-weight: " + supCss['dropfontWeight'] + ";\n";
    supCssTxt             += "     border-bottom: " + supCss['dropItemborderWidth'] + "  " + supCss['dropItemborderStyle'] + "  " + supCss['dropItemborderColor'] + ";\n";
    supCssTxt             += "     border-radius: 0;\n";
    supCssTxt             += "     -moz-border-radius: 0;\n";
    supCssTxt             += "     -webkit-border-radius: 0;\n";
    supCssTxt             += "     -o-border-radius: 0;\n";
    supCssTxt             += " }\n";

    supCssTxt             += " #sup-nav li ul li :hover {\n";
    supCssTxt             += "     color: " + supCss['dropHovfontColor'] + " !important;\n";
    supCssTxt             += "     border-radius: 0;\n";
    supCssTxt             += "     -moz-border-radius: 0;\n";
    supCssTxt             += "     -webkit-border-radius: 0;\n";
    supCssTxt             += "     -o-border-radius: 0;\n";
    supCssTxt             += "     background: " + supCss['dropHovBg1'] + ";\n"; 
    supCssTxt             += "     background: -moz-linear-gradient(" + supCss['dropHovOrientasi'] + ",  " + supCss['dropHovBg1'] + " " + supCss['dropHovBgPos1'] + ", " + supCss['dropHovBg2'] + " " + supCss['dropHovBgPos2'] + ", " + supCss['dropHovBg3'] + " " + supCss['dropHovBgPos3'] + ", " + supCss['dropHovBg4'] + " " + supCss['dropHovBgPos4'] + ");\n"; 
    supCssTxt             += "     background: -webkit-gradient(linear, left " + supCss['dropHovOrientasi'] + ", left bottom, color-stop(" + supCss['dropHovBgPos1'] + "," + supCss['dropHovBg1'] + "), color-stop(" + supCss['dropHovBgPos2'] + "," + supCss['dropHovBg2'] + "), color-stop(" + supCss['dropHovBgPos3'] + "," + supCss['dropHovBg3'] + "), color-stop(" + supCss['dropHovBgPos4'] + "," + supCss['dropHovBg4'] + "));\n"; 
    supCssTxt             += "     background: -webkit-linear-gradient(" + supCss['dropHovOrientasi'] + ",  " + supCss['dropHovBg1'] + " " + supCss['dropHovBgPos1'] + "," + supCss['dropHovBg2'] + " " + supCss['dropHovBgPos2'] + "," + supCss['dropHovBg3'] + " " + supCss['dropHovBgPos3'] + "," + supCss['dropHovBg4'] + " " + supCss['dropHovBgPos4'] + ");\n"; 
    supCssTxt             += "     background: -o-linear-gradient(" + supCss['dropHovOrientasi'] + ",  " + supCss['dropHovBg1'] + " " + supCss['dropHovBgPos1'] + "," + supCss['dropHovBg2'] + " " + supCss['dropHovBgPos2'] + "," + supCss['dropHovBg3'] + " " + supCss['dropHovBgPos3'] + "," + supCss['dropHovBg4'] + " " + supCss['dropHovBgPos4'] + ");\n"; 
    supCssTxt             += "     background: -ms-linear-gradient(" + supCss['dropHovOrientasi'] + ",  " + supCss['dropHovBg1'] + " " + supCss['dropHovBgPos1'] + "," + supCss['dropHovBg2'] + " " + supCss['dropHovBgPos2'] + "," + supCss['dropHovBg3'] + " " + supCss['dropHovBgPos3'] + "," + supCss['dropHovBg4'] + " " + supCss['dropHovBgPos4'] + ");\n"; 
    supCssTxt             += "     background: linear-gradient(to " + supCss['dropHovOrientasi'] + ",  " + supCss['dropHovBg1'] + " " + supCss['dropHovBgPos1'] + "," + supCss['dropHovBg2'] + " " + supCss['dropHovBgPos2'] + "," + supCss['dropHovBg3'] + " " + supCss['dropHovBgPos3'] + "," + supCss['dropHovBg4'] + " " + supCss['dropHovBgPos4'] + ");\n"; 
    supCssTxt             += " }\n";

    supCssTxt             += " #sup-nav li ul li:first-child > a {\n";
    supCssTxt             += "     border-top-left-radius: 10px;\n";
    supCssTxt             += "     -webkit-border-top-left-radius: 10px;\n";
    supCssTxt             += "     -moz-border-radius-topleft: 10px;\n";
    supCssTxt             += "     border-top-right-radius: 10px;\n";
    supCssTxt             += "     -webkit-border-top-right-radius: 10px;\n";
    supCssTxt             += "     -moz-border-radius-topright: 10px;\n";
    supCssTxt             += "  }\n";

    supCssTxt             += " #sup-nav li ul li:last-child > a {\n";
    supCssTxt             += "     border-bottom-left-radius: 10px;\n";
    supCssTxt             += "     -webkit-border-bottom-left-radius: 10px;\n";
    supCssTxt             += "     -moz-border-radius-bottomleft: 10px;\n";
    supCssTxt             += "     border-bottom-right-radius: 10px;\n";
    supCssTxt             += "     -webkit-border-bottom-right-radius: 10px;\n";
    supCssTxt             += "     -moz-border-radius-bottomright: 10px;\n";
    supCssTxt             += " }\n";

    supCssTxt             += " #sup-nav:after {\n";
    supCssTxt             += "     display: block;\n";
    supCssTxt             += "     clear: both;\n";
    supCssTxt             += "     visibility: hidden;\n";
    supCssTxt             += "     line-height: 0;\n";
    supCssTxt             += "     height: 0;\n";
    supCssTxt             += "     }\n"; 

    supCssTxt             += " /* Search Box \n";
    supCssTxt             += " ================================================ */ \n";
    supCssTxt             += " #searchbox {\n";
    supCssTxt             += "     float:right;\n";
    supCssTxt             += "     color: #ffffff;\n";
    supCssTxt             += "     margin-top: " + supCss['searchMarginT'] + ";\n";
    supCssTxt             += "     padding: 0;\n";
    supCssTxt             += "     border: 1px " + supCss['searchBorderStyle'] + " " + supCss['searcBorderColor'] + ";\n";
    supCssTxt             += "     -webkit-border-radius: " + supCss['searchBorderRadius'] + ";\n";
    supCssTxt             += "     -moz-border-radius: " + supCss['searchBorderRadius'] + ";\n";
    supCssTxt             += "     -o-border-radius: " + supCss['searchBorderRadius'] + ";\n";
    supCssTxt             += "     border-radius: " + supCss['searchBorderRadius'] + ";\n";
    supCssTxt             += "     background: " + supCss['searchBg1'] + ";\n"; 
    supCssTxt             += "     background: -moz-linear-gradient(" + supCss['searchOrientasi'] + ",  " + supCss['searchBg1'] + " " + supCss['searchBgPos1'] + ", " + supCss['searchBg2'] + " " + supCss['searchBgPos2'] + ", " + supCss['searchBg3'] + " " + supCss['searchBgPos3'] + ", " + supCss['searchBg4'] + " " + supCss['searchBgPos4'] + ");\n"; 
    supCssTxt             += "     background: -webkit-gradient(linear, left " + supCss['searchOrientasi'] + ", left bottom, color-stop(" + supCss['searchBgPos1'] + "," + supCss['searchBg1'] + "), color-stop(" + supCss['searchBgPos2'] + "," + supCss['searchBg2'] + "), color-stop(" + supCss['searchBgPos3'] + "," + supCss['searchBg3'] + "), color-stop(" + supCss['searchBgPos4'] + "," + supCss['searchBg4'] + "));\n"; 
    supCssTxt             += "     background: -webkit-linear-gradient(" + supCss['searchOrientasi'] + ",  " + supCss['searchBg1'] + " " + supCss['searchBgPos1'] + "," + supCss['searchBg2'] + " " + supCss['searchBgPos2'] + "," + supCss['searchBg3'] + " " + supCss['searchBgPos3'] + "," + supCss['searchBg4'] + " " + supCss['searchBgPos4'] + ");\n"; 
    supCssTxt             += "     background: -o-linear-gradient(" + supCss['searchOrientasi'] + ",  " + supCss['searchBg1'] + " " + supCss['searchBgPos1'] + "," + supCss['searchBg2'] + " " + supCss['searchBgPos2'] + "," + supCss['searchBg3'] + " " + supCss['searchBgPos3'] + "," + supCss['searchBg4'] + " " + supCss['searchBgPos4'] + ");\n"; 
    supCssTxt             += "     background: -ms-linear-gradient(" + supCss['searchOrientasi'] + ",  " + supCss['searchBg1'] + " " + supCss['searchBgPos1'] + "," + supCss['searchBg2'] + " " + supCss['searchBgPos2'] + "," + supCss['searchBg3'] + " " + supCss['searchBgPos3'] + "," + supCss['searchBg4'] + " " + supCss['searchBgPos4'] + ");\n"; 
    supCssTxt             += "     background: linear-gradient(to " + supCss['searchOrientasi'] + ",  " + supCss['searchBg1'] + " " + supCss['searchBgPos1'] + "," + supCss['searchBg2'] + " " + supCss['searchBgPos2'] + "," + supCss['searchBg3'] + " " + supCss['searchBgPos3'] + "," + supCss['searchBg4'] + " " + supCss['searchBgPos4'] + ");\n"; 

	if (document.getElementById("searchTrue").checked==true) {

	} else { 
    supCssTxt             += "     display: none;\n";
    supCssTxt             += "     visibility:hidden;\n";
	}
    supCssTxt             += "     }\n";

    supCssTxt             += " #searchbox input[type='text'] {\n";
    supCssTxt             += "     background: transparent  url(images/search-light.png) no-repeat 10px 8px;\n";
    supCssTxt             += "     font: normal 12px Arial;\n";
    supCssTxt             += "     color: #ffffff;\n";
    supCssTxt             += "     width: " + supCss['searchwidth'] + ";\n";
    supCssTxt             += "     padding: 7px 15px 7px 35px;\n";
    supCssTxt             += "     margin: 0;\n";
    supCssTxt             += "     border: 0;\n";
    supCssTxt             += "     -webkit-border-radius: " + supCss['searchBorderRadius'] + ";\n";
    supCssTxt             += "     -moz-border-radius: " + supCss['searchBorderRadius'] + ";\n";
    supCssTxt             += "     -o-border-radius: " + supCss['searchBorderRadius'] + ";\n";
    supCssTxt             += "     border-radius: " + supCss['searchBorderRadius'] + ";\n";
    supCssTxt             += "     -webkit-transition: all 0.7s ease 0s;\n";
    supCssTxt             += "     -moz-transition: all 0.7s ease 0s;\n";
    supCssTxt             += "     -o-transition: all 0.7s ease 0s;\n";
    supCssTxt             += "     transition: all 0.7s ease 0s;\n";

    supCssTxt             += " }\n";

    supCssTxt             += " #searchbox input[type='text']:focus {\n";
    supCssTxt             += "     background: #EAEAEA  url(images/search-dark.png) no-repeat 10px 8px;\n";
    supCssTxt             += "     color: #222222;\n";
    supCssTxt             += "     width: " + supCss['searchHovwidth'] + ";\n";
    supCssTxt             += "     outline: none;\n";
    supCssTxt             += " }\n";
    supCssTxt             += " /* End Sup-Nav Menu \n";
    supCssTxt             += " ================================================ */ \n";

    $("#navpreview").html("<style type='text/css'>" + supCssTxt + "</style>");  
    $("#ambil-css").text(supCssTxt);
}


//HTML code
function tampilkanHTML() {  
    supHtmlCode             += '<ul id="sup-nav">\n';
    supHtmlCode             += '   <li class="current"><a href="/">Home</a></li>\n';
    supHtmlCode             += '   <li><a href="#">Products</a>\n';
    supHtmlCode             += '	<ul>\n';
    supHtmlCode             += '	  <li><a href="#">Products Sub Menu 1</a></li>\n';
    supHtmlCode             += '	  <li><a href="#">Products Sub Menu 2</a></li>\n';
    supHtmlCode             += '	  <li><a href="#">Products Sub Menu 3</a></li>\n';
    supHtmlCode             += '	  <li><a href="#">Products Sub Menu 4</a></li>\n';
    supHtmlCode             += '	</ul>\n';
    supHtmlCode             += '   </li>\n';
    supHtmlCode             += '   <li><a href="#">Services</a>\n';
    supHtmlCode             += '	<ul>\n';
    supHtmlCode             += '	  <li><a href="#">Services Sub Menu 1</a></li>\n';
    supHtmlCode             += '	  <li><a href="#">Services Sub Menu 2</a></li>\n';
    supHtmlCode             += '	  <li><a href="#">Services Sub Menu 3</a></li>\n';
    supHtmlCode             += '	  <li><a href="#">Services Sub Menu 4</a></li>\n';
    supHtmlCode             += '	</ul>\n';
    supHtmlCode             += '   </li>\n';
    supHtmlCode             += '   <li><a href="#">About</a></li>\n';
    supHtmlCode             += '   <li><a href="#">Contact Us</a></li>\n';
    supHtmlCode             += '	<div id="searchbox">\n';
    supHtmlCode             += '	<form action="/search" id="search" method="get">\n';
    supHtmlCode	            += '	<input name="q" placeholder="Search..." size="40" type="text"/>\n';
    supHtmlCode             += '	</form>\n';
    supHtmlCode             += '	</div>\n';
    supHtmlCode             += '</ul>\n';

    $("#tampil-menu").html(supHtmlCode);
    $("#ambil-html").text(supHtmlCode);
} 

 

function tengahkanMenu() {
    $(".button").position({
    	"my": "center center",
    	"at": "center center",
    	"of": $("#nav-menu-area")
    });
};

$(function() {

    $("head").append("<style type='text/css'></style>");

    tengahkanMenu();
    tulisCSS();
    tampilkanHTML();


// ====================================================
// ================ Tampilan MENU UTAMA ===============
// ====================================================
    $("#supnav-widthPx").slider({
	animate: true,
        range: "min",
        value: 950,
        min: 500,
        max: 1336,
        slide: function (event, ui) {
            $("#supNavWidthPx-lbl").text(ui.value);
            supCss['supNavWidthPx'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#supNavWidthPx-lbl").text(ui.value);
            supCss['supNavWidthPx'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

    $("#supnav-widthPr").slider({
	animate: true,
        range: "min",
        value: 90,
        min: 30,
        max: 100,
        slide: function (event, ui) {
            $("#supNavWidthPr-lbl").text(ui.value);
            supCss['supNavWidthPr'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#supNavWidthPr-lbl").text(ui.value);
            supCss['supNavWidthPr'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

     $("#supnav-Height").slider({
	animate: true,
        range: "min",
        value: 40,
        min: 30,
        max: 75,
        slide: function (event, ui) {
            $("#supNavHeight-lbl").text(ui.value);
            supCss['supNavHeight'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#supNavHeight-lbl").text(ui.value);
            supCss['supNavHeight'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

    //border Style

    $("#border-width").slider({
	animate: true,
        range: "min",
        value: 2,
        min: 0,
        max: 10,
        slide: function (event, ui) {
            $("#borderWidth-lbl").text(ui.value);
            supCss['borderWidth'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#borderWidth-lbl").text(ui.value);
            supCss['borderWidth'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	
 

// ============ NAV Padding & Margin ============= //

     $("#nav-marginT").slider({
	animate: true,
        range: "min",
        value: 0,
        min: 0,
        max: 25,
        slide: function (event, ui) {
            $("#NmarginT-lbl").text(ui.value);
            supCss['NmarginT'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#NmarginT-lbl").text(ui.value);
            supCss['NmarginT'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

      $("#nav-marginB").slider({
	animate: true,
        range: "min",
        value: 0,
        min: 0,
        max: 25,
        slide: function (event, ui) {
            $("#NmarginB-lbl").text(ui.value);
            supCss['NmarginB'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#NmarginB-lbl").text(ui.value);
            supCss['NmarginB'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

     $("#nav-paddingT").slider({
	animate: true,
        range: "min",
        value: 0,
        min: 0,
        max: 25,
        slide: function (event, ui) {
            $("#paddingT-lbl").text(ui.value);
            supCss['paddingT'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#paddingT-lbl").text(ui.value);
            supCss['paddingT'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

      $("#nav-paddingR").slider({
	animate: true,
        range: "min",
        value: 10,
        min: 0,
        max: 25,
        slide: function (event, ui) {
            $("#paddingR-lbl").text(ui.value);
            supCss['paddingR'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#paddingR-lbl").text(ui.value);
            supCss['paddingR'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

     $("#nav-paddingB").slider({
	animate: true,
        range: "min",
        value: 0,
        min: 0,
        max: 25,
        slide: function (event, ui) {
            $("#paddingB-lbl").text(ui.value);
            supCss['paddingB'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#paddingB-lbl").text(ui.value);
            supCss['paddingB'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        }
    });	

      $("#nav-paddingL").slider({
	animate: true,
        range: "min",
        value: 10,
        min: 0,
        max: 25,
        slide: function (event, ui) {
            $("#paddingL-lbl").text(ui.value);
            supCss['paddingL'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#paddingL-lbl").text(ui.value);
            supCss['paddingL'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        }
    });	 
 
// ============ NAVI  RADIUS ============= //
     $("#nav-RadiusT").slider({
	animate: true,
        range: "min",
        value: 15,
        min: 0,
        max: 50,
        slide: function (event, ui) {
            $("#navRadiusT-lbl").text(ui.value);
            supCss['navRadiusT'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#pnavRadiusT-lbl").text(ui.value);
            supCss['navRadiusT'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

      $("#nav-RadiusR").slider({
	animate: true,
        range: "min",
        value: 15,
        min: 0,
        max: 50,
        slide: function (event, ui) {
            $("#navRadiusR-lbl").text(ui.value);
            supCss['navRadiusR'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#navRadiusR-lbl").text(ui.value);
            supCss['navRadiusR'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

     $("#nav-RadiusB").slider({
	animate: true,
        range: "min",
        value: 15,
        min: 0,
        max: 50,
        slide: function (event, ui) {
            $("#navRadiusB-lbl").text(ui.value);
            supCss['navRadiusB'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#navRadiusB-lbl").text(ui.value);
            supCss['navRadiusB'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        }
    });	

      $("#nav-RadiusL").slider({
	animate: true,
        range: "min",
        value: 15,
        min: 0,
        max: 50,
        slide: function (event, ui) {
            $("#navRadiusL-lbl").text(ui.value);
            supCss['navRadiusL'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#navRadiusL-lbl").text(ui.value);
            supCss['navRadiusL'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        }
    });	
 

 // ================  background Color Posisi ================= 
    $("#navBgPos1").slider({
	animate: true,
        range: "min",
        value: 0,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            $("#navBgPos1-lbl").text(ui.value);
            supCss['navBgPos1'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#navBgPos1-lbl").text(ui.value);
            supCss['navBgPos1'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

    $("#navBgPos2").slider({
	animate: true,
        range: "min",
        value: 50,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            $("#navBgPos2-lbl").text(ui.value);
            supCss['navBgPos2'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#navBgPos2-lbl").text(ui.value);
            supCss['navBgPos2'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

    $("#navBgPos3").slider({
	animate: true,
        range: "min",
        value: 50,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            $("#navBgPos3-lbl").text(ui.value);
            supCss['navBgPos3'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#navBgPos3-lbl").text(ui.value);
            supCss['navBgPos3'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	 

    $("#navBgPos4").slider({
	animate: true,
        range: "min",
        value: 100,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            $("#navBgPos4-lbl").text(ui.value);
            supCss['navBgPos4'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#navBgPos4-lbl").text(ui.value);
            supCss['navBgPos4'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

// ====================================================
// ================ Item & Font Option ================ 
// ====================================================
    $("#font-size").slider({
	animate: true,
        range: "min",
        value: 13,
        min: 8,
        max: 32,
        slide: function (event, ui) {
            $("#fontSize-lbl").text(ui.value);
            supCss['fontSize'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#fontSize-lbl").text(ui.value);
            supCss['fontSize'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });		


    $("#fontSelector").change(function() {
    
        supCss['fontStack'] = $(this).val();
        tulisCSS();
    
    });

    $("#fontStylezed").change(function() {
    
        supCss['fontStyle'] = $(this).val();
        tulisCSS();
    
    });

    $("#fontWeighted").change(function() {
    
        supCss['fontWeight'] = $(this).val();
        tulisCSS();
    
    });

    $("#textTransformat").change(function() {
    
        supCss['textTransform'] = $(this).val();
        tulisCSS();
    
    });


    $("#itemBorder-R").change(function() {
    
        supCss['itemBorderR'] = $(this).val();
        tulisCSS();
    
    });

// ============ ITEM RADIUS ============= //
     $("#itemRadiusT").slider({
	animate: true,
        range: "min",
        value: 15,
        min: 0,
        max: 50,
        slide: function (event, ui) {
            $("#itemRadiusT-lbl").text(ui.value);
            supCss['itemRadiusT'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#pitemRadiusT-lbl").text(ui.value);
            supCss['itemRadiusT'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

      $("#itemRadiusR").slider({
	animate: true,
        range: "min",
        value: 15,
        min: 0,
        max: 50,
        slide: function (event, ui) {
            $("#itemRadiusR-lbl").text(ui.value);
            supCss['itemRadiusR'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#itemRadiusR-lbl").text(ui.value);
            supCss['itemRadiusR'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

     $("#itemRadiusB").slider({
	animate: true,
        range: "min",
        value: 15,
        min: 0,
        max: 50,
        slide: function (event, ui) {
            $("#itemRadiusB-lbl").text(ui.value);
            supCss['itemRadiusB'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#itemRadiusB-lbl").text(ui.value);
            supCss['itemRadiusB'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        }
    });	

      $("#itemRadiusL").slider({
	animate: true,
        range: "min",
        value: 15,
        min: 0,
        max: 50,
        slide: function (event, ui) {
            $("#itemRadiusL-lbl").text(ui.value);
            supCss['itemRadiusL'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#itemRadiusL-lbl").text(ui.value);
            supCss['itemRadiusL'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        }
    });	 



// ============ NAV Item Padding ============= //
     $("#itemPaddingT").slider({
	animate: true,
        range: "min",
        value: 8,
        min: 0,
        max: 25,
        slide: function (event, ui) {
            $("#itemPaddingT-lbl").text(ui.value);
            supCss['itemPaddingT'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#itemPaddingT-lbl").text(ui.value);
            supCss['itemPaddingT'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

      $("#itemPaddingR").slider({
	animate: true,
        range: "min",
        value: 20,
        min: 0,
        max: 25,
        slide: function (event, ui) {
            $("#itemPaddingR-lbl").text(ui.value);
            supCss['itemPaddingR'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#itemPaddingR-lbl").text(ui.value);
            supCss['itemPaddingR'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

     $("#itemPaddingB").slider({
	animate: true,
        range: "min",
        value: 8,
        min: 0,
        max: 25,
        slide: function (event, ui) {
            $("#itemPaddingB-lbl").text(ui.value);
            supCss['itemPaddingB'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#itemPaddingB-lbl").text(ui.value);
            supCss['itemPaddingB'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        }
    });	

      $("#itemPaddingL").slider({
	animate: true,
        range: "min",
        value: 20,
        min: 0,
        max: 25,
        slide: function (event, ui) {
            $("#itemPaddingL-lbl").text(ui.value);
            supCss['itemPaddingL'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#itemPaddingL-lbl").text(ui.value);
            supCss['itemPaddingL'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        }
    });	


// ================  Menu item Color Posisi ================= 
    $("#itemBgPos1").slider({
	animate: true,
        range: "min",
        value: 0,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            $("#itemBgPos1-lbl").text(ui.value);
            supCss['itemBgPos1'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#itemBgPos1-lbl").text(ui.value);
            supCss['itemBgPos1'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

    $("#itemBgPos2").slider({
	animate: true,
        range: "min",
        value: 50,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            $("#itemBgPos2-lbl").text(ui.value);
            supCss['itemBgPos2'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#itemBgPos2-lbl").text(ui.value);
            supCss['itemBgPos2'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

    $("#itemBgPos3").slider({
	animate: true,
        range: "min",
        value: 50,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            $("#itemBgPos3-lbl").text(ui.value);
            supCss['itemBgPos3'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#itemBgPos3-lbl").text(ui.value);
            supCss['itemBgPos3'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	 

    $("#itemBgPos4").slider({
	animate: true,
        range: "min",
        value: 50,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            $("#itemBgPos4-lbl").text(ui.value);
            supCss['itemBgPos4'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#itemBgPos4-lbl").text(ui.value);
            supCss['itemBgPos4'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

// ==============  Menu item Hover Color Posisi ================
    $("#itemHovBgPos1").slider({
	animate: true,
        range: "min",
        value: 0,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            $("#itemHovBgPos1-lbl").text(ui.value);
            supCss['itemHovBgPos1'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#itemHovBgPos1-lbl").text(ui.value);
            supCss['itemHovBgPos1'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

    $("#itemHovBgPos2").slider({
	animate: true,
        range: "min",
        value: 50,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            $("#itemHovBgPos2-lbl").text(ui.value);
            supCss['itemHovBgPos2'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#itemHovBgPos2-lbl").text(ui.value);
            supCss['itemHovBgPos2'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

    $("#itemHovBgPos3").slider({
	animate: true,
        range: "min",
        value: 50,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            $("#itemHovBgPos3-lbl").text(ui.value);
            supCss['itemHovBgPos3'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#itemHovBgPos3-lbl").text(ui.value);
            supCss['itemHovBgPos3'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	 

    $("#itemHovBgPos4").slider({
	animate: true,
        range: "min",
        value: 50,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            $("#itemHovBgPos4-lbl").text(ui.value);
            supCss['itemHovBgPos4'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#itemHovBgPos4-lbl").text(ui.value);
            supCss['itemHovBgPos4'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

// ==============  Menu item Current Color Posisi ================
    $("#itemCurBgPos1").slider({
	animate: true,
        range: "min",
        value: 0,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            $("#itemCurBgPos1-lbl").text(ui.value);
            supCss['itemCurBgPos1'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#itemCurBgPos1-lbl").text(ui.value);
            supCss['itemCurBgPos1'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

    $("#itemCurBgPos2").slider({
	animate: true,
        range: "min",
        value: 50,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            $("#itemCurBgPos2-lbl").text(ui.value);
            supCss['itemCurBgPos2'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#itemCurBgPos2-lbl").text(ui.value);
            supCss['itemCurBgPos2'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

    $("#itemCurBgPos3").slider({
	animate: true,
        range: "min",
        value: 50,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            $("#itemCurBgPos3-lbl").text(ui.value);
            supCss['itemCurBgPos3'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#itemCurBgPos3-lbl").text(ui.value);
            supCss['itemCurBgPos3'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	 

    $("#itemCurBgPos4").slider({
	animate: true,
        range: "min",
        value: 50,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            $("#itemCurBgPos4-lbl").text(ui.value);
            supCss['itemCurBgPos4'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#itemCurBgPos4-lbl").text(ui.value);
            supCss['itemCurBgPos4'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	
// ====================================================
// ============== Menu Dropdown Option ================
// ====================================================

    $("#dropDownWidth").slider({
	animate: true,
        range: "min",
        value: 185,
        min: 150,
        max: 300,
        slide: function (event, ui) {
            $("#dropDownWidth-lbl").text(ui.value);
            supCss['dropDownWidth'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#dropDownWidth-lbl").text(ui.value);
            supCss['dropDownWidth'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

    $("#topDropDown").slider({
	animate: true,
        range: "min",
        value: 40,
        min: 0,
        max: 75,
        slide: function (event, ui) {
            $("#topDropDown-lbl").text(ui.value);
            supCss['topDropDown'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#topDropDown-lbl").text(ui.value);
            supCss['topDropDown'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

    $("#paddingDropDown").slider({
	animate: true,
        range: "min",
        value: 0,
        min: 0,
        max: 15,
        slide: function (event, ui) {
            $("#paddingDropDown-lbl").text(ui.value);
            supCss['paddingDropDown'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#paddingDropDown-lbl").text(ui.value);
            supCss['paddingDropDown'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	
    $("#leftDropDown").slider({
	animate: true,
        range: "min",
        value: 0,
        min: -100,
        max: 100,
        slide: function (event, ui) {
            $("#leftDropDown-lbl").text(ui.value);
            supCss['leftDropDown'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#leftDropDown-lbl").text(ui.value);
            supCss['leftDropDown'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

    $("#dropborderWidth").slider({
	animate: true,
        range: "min",
        value: 1,
        min: 0,
        max: 5,
        slide: function (event, ui) {
            $("#dropborderWidth-lbl").text(ui.value);
            supCss['dropborderWidth'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#dropborderWidth-lbl").text(ui.value);
            supCss['dropborderWidth'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	
    $("#dropborderStyle").change(function() {
    
        supCss['dropborderStyle'] = $(this).val();
        tulisCSS();
    
    });

// ============ DROP  RADIUS ============= //
     $("#drop-RadiusT").slider({
	animate: true,
        range: "min",
        value: 10,
        min: 0,
        max: 50,
        slide: function (event, ui) {
            $("#dropRadiusT-lbl").text(ui.value);
            supCss['dropRadiusT'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#pdropRadiusT-lbl").text(ui.value);
            supCss['dropRadiusT'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

      $("#drop-RadiusR").slider({
	animate: true,
        range: "min",
        value: 10,
        min: 0,
        max: 50,
        slide: function (event, ui) {
            $("#dropRadiusR-lbl").text(ui.value);
            supCss['dropRadiusR'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#dropRadiusR-lbl").text(ui.value);
            supCss['dropRadiusR'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

     $("#drop-RadiusB").slider({
	animate: true,
        range: "min",
        value: 10,
        min: 0,
        max: 50,
        slide: function (event, ui) {
            $("#dropRadiusB-lbl").text(ui.value);
            supCss['dropRadiusB'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#dropRadiusB-lbl").text(ui.value);
            supCss['dropRadiusB'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        }
    });	

      $("#drop-RadiusL").slider({
	animate: true,
        range: "min",
        value: 10,
        min: 0,
        max: 50,
        slide: function (event, ui) {
            $("#dropRadiusL-lbl").text(ui.value);
            supCss['dropRadiusL'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#dropRadiusL-lbl").text(ui.value);
            supCss['dropRadiusL'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        }
    });	


// ================  Menu dropdown Color Posisi ================= 
    $("#dropBgPos1").slider({
	animate: true,
        range: "min",
        value: 0,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            $("#dropBgPos1-lbl").text(ui.value);
            supCss['dropBgPos1'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#dropBgPos1-lbl").text(ui.value);
            supCss['dropBgPos1'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

    $("#dropBgPos2").slider({
	animate: true,
        range: "min",
        value: 50,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            $("#dropBgPos2-lbl").text(ui.value);
            supCss['dropBgPos2'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#dropBgPos2-lbl").text(ui.value);
            supCss['dropBgPos2'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

    $("#dropBgPos3").slider({
	animate: true,
        range: "min",
        value: 50,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            $("#dropBgPos3-lbl").text(ui.value);
            supCss['dropBgPos3'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#dropBgPos3-lbl").text(ui.value);
            supCss['dropBgPos3'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	 

    $("#dropBgPos4").slider({
	animate: true,
        range: "min",
        value: 50,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            $("#dropBgPos4-lbl").text(ui.value);
            supCss['dropBgPos4'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#dropBgPos4-lbl").text(ui.value);
            supCss['dropBgPos4'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

// Dropdown text & font

    $("#dropfont-size").slider({
	animate: true,
        range: "min",
        value: 13,
        min: 8,
        max: 18,
        slide: function (event, ui) {
            $("#dropfontSize-lbl").text(ui.value);
            supCss['dropfontSize'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#dropfontSize-lbl").text(ui.value);
            supCss['dropfontSize'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });		

// Drop Item Hover
    $("#dropHovBgPos1").slider({
	animate: true,
        range: "min",
        value: 0,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            $("#dropHovBgPos2-lb1").text(ui.value);
            supCss['dropHovBgPos1'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#dropHovBgPos1-lbl").text(ui.value);
            supCss['dropHovBgPos1'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

    $("#dropHovBgPos2").slider({
	animate: true,
        range: "min",
        value: 50,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            $("#dropHovBgPos2-lbl").text(ui.value);
            supCss['dropHovBgPos2'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#dropHovBgPos2-lbl").text(ui.value);
            supCss['dropHovBgPos2'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

    $("#dropHovBgPos3").slider({
	animate: true,
        range: "min",
        value: 50,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            $("#dropHovBgPos3-lbl").text(ui.value);
            supCss['dropHovBgPos3'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#dropHovBgPos3-lbl").text(ui.value);
            supCss['dropHovBgPos3'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	 

    $("#dropHovBgPos4").slider({
	animate: true,
        range: "min",
        value: 50,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            $("#dropHovBgPos4-lbl").text(ui.value);
            supCss['dropHovBgPos4'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#dropHovBgPos4-lbl").text(ui.value);
            supCss['dropHovBgPos4'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	


 
    $("#dropItemborderStyle").change(function() {
    
        supCss['dropItemborderStyle'] = $(this).val();
        tulisCSS();
    
    });
    $("#dropItemborderWidth").change(function() {
    
        supCss['dropItemborderWidth'] = $(this).val();
        tulisCSS();
    
    });

    $("#dropfontSelector").change(function() {
    
        supCss['dropfontStack'] = $(this).val();
        tulisCSS();
    });

    $("#dropfontStylezed").change(function() {
    
        supCss['dropfontStyle'] = $(this).val();
        tulisCSS();
    
    });

    $("#dropfontWeighted").change(function() {
    
        supCss['dropfontWeight'] = $(this).val();
        tulisCSS();
    
    });

// Kotak Pencarian

    $("#searchwidth").slider({
	animate: true,
        range: "min",
        value: 90,
        min: 50,
        max: 150,
        slide: function (event, ui) {
            $("#searchwidth-lbl").text(ui.value);
            supCss['searchwidth'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#searchwidth-lbl").text(ui.value);
            supCss['searchwidth'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

    $("#searchHovwidth").slider({
	animate: true,
        range: "min",
        value: 200,
        min: 50,
        max: 250,
        slide: function (event, ui) {
            $("#searchHovwidth-lbl").text(ui.value);
            supCss['searchHovwidth'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#searchHovwidth-lbl").text(ui.value);
            supCss['searchHovwidth'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

     $("#searchMarginT").slider({
	animate: true,
        range: "min",
        value: 5,
        min: 0,
        max: 25,
        slide: function (event, ui) {
            $("#searchMarginT-lbl").text(ui.value);
            supCss['searchMarginT'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#searchMarginT-lbl").text(ui.value);
            supCss['searchMarginT'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	


    $("#searchBgPos1").slider({
	animate: true,
        range: "min",
        value: 0,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            $("#searchBgPos1-lbl").text(ui.value);
            supCss['searchBgPos1'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#searchBgPos1-lbl").text(ui.value);
            supCss['searchBgPos1'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

    $("#searchBgPos2").slider({
	animate: true,
        range: "min",
        value: 50,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            $("#searchBgPos2-lbl").text(ui.value);
            supCss['searchBgPos2'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#searchBgPos2-lbl").text(ui.value);
            supCss['searchBgPos2'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	

    $("#searchBgPos3").slider({
	animate: true,
        range: "min",
        value: 50,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            $("#searchBgPos3-lbl").text(ui.value);
            supCss['searchBgPos3'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#searchBgPos3-lbl").text(ui.value);
            supCss['searchBgPos3'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	 

    $("#searchBgPos4").slider({
	animate: true,
        range: "min",
        value: 100,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            $("#searchBgPos4-lbl").text(ui.value);
            supCss['searchBgPos4'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#searchBgPos4-lbl").text(ui.value);
            supCss['searchBgPos4'] = ui.value + "%";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	 

    $("#searchBorder-Radius").slider({
	animate: true,
        range: "min",
        value: 20,
        min: 0,
        max: 50,
        slide: function (event, ui) {
            $("#searchBorderRadius-lbl").text(ui.value);
            supCss['searchBorderRadius'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
        },
        change: function (event, ui) {
            $("#searchBorderRadius-lbl").text(ui.value);
            supCss['searchBorderRadius'] = ui.value + "px";
            tengahkanMenu();
	    tulisCSS();
 
        }
    });	 

// Pilihan pengaturan lainnya


	$('.pickable').ColorPicker({
    	onSubmit: function(hsb, hex, rgb, el) {
    		$(el).val(hex).css("background", "#" + hex);
    		$(el).ColorPickerHide();
    		
    		forValue = $(el).attr("rel");
    		    		
    		supCss[forValue] = "#" + hex;
    		tulisCSS();
    		
    	},
    	onChange: function(hsb, hex, rgb, el) {
    	
    		$($(this).data('colorpicker').el).val(hex).css("background", "#" + hex);
    		
    		forValue = $($(this).data('colorpicker').el).attr("rel");
    		    		
    		supCss[forValue] = "#" + hex;
    		tulisCSS();
    		
    	},
    	onBeforeShow: function () {
    		$(this).ColorPickerSetColor(this.value);
    	}
    });

//Selector Option

    $("#model-orientasi").change(function() {
    
        supCss['Orientasi'] = $(this).val();
        tulisCSS();
    
    });


    $("#item-orientasi").change(function() {
    
        supCss['itemOrientasi'] = $(this).val();
        tulisCSS();
    
    });

    $("#drop-orientasi").change(function() {
    
        supCss['dropOrientasi'] = $(this).val();
        tulisCSS();
    
    });

    $("#dropHovOrientasi").change(function() {
    
        supCss['dropHovOrientasi'] = $(this).val();
        tulisCSS();
    
    });

    $("#searchOrientasi").change(function() {
    
        supCss['searchOrientasi'] = $(this).val();
        tulisCSS();
    
    });
    $("#border-style").change(function() {
    
        supCss['borderStyle'] = $(this).val();
        tulisCSS();
    
    });
    
     $("#searchBorderStyle").change(function() {
    
        supCss['searchBorderStyle'] = $(this).val();
        tulisCSS();
    
    });
   
    $(".button").click(function() {
        $("#the-css").dialog({
            "title": "The CSS",
            "width": 400
        });
    });
    


});
//]]>
</script>
<script type='text/javascript'>
  	   $(function() { $( "#tabs" ).tabs();});
  	</script>